<script>
	$(function(){
		layui.use('layer', function(){
			$('.picture').each(function(){
				var id = $(this).attr("id");
				layer.photos({
					photos: '#'+id,
					anim: 5
				}); 
			})				
		});
		// 折叠面板
		$(".slideBtn").click(function() {	
	        var controlDIV = $(this).next();
	        if (controlDIV.is(":hidden")) {
	            controlDIV.slideDown("slow");
	            $(this).find("i").removeClass("icon-down").addClass("icon-up");
	        } else{
	            controlDIV.slideUp("slow");
	            $(this).find("i").removeClass("icon-up").addClass("icon-down");
	        }
	    });
	})
</script>

<!-- 当前位置 -->
<div class="breadCrumbs"><i class="icon icon-home"></i><a href="#"><{$title}></a></div>

<!-- 当前车型概要 -->
<div class="performanceDteial">
	<div class="thumb"><img src="<{$vehicle.url}>" alt=""></div>
	<div class="tbInfo">
		<table class="tb_carInfo">
			<tr>
				<th>Vehicle</th>
				<td><{$vehicle.brand}></td>
			</tr>
			<tr>
				<th>Model Year</th>
				<td><{$vehicle.year}></td>
			</tr>
			<tr>
				<th>Engine Volume/L</th>
				<td><{$vehicle.displacement}></td>
			</tr>
			<tr>
				<th>Quantity</th>
				<td><{$vehicle.quantity}></td>
			</tr>
			<tr>
				<th>Weight/kg</th>
				<td><{$vehicle.mass}></td>
			</tr>
		</table>
	</div>
</div>

<!-- 车型图片 -->
<notempty name="lists">
	<volist name="lists" id="vo">
		<blockquote class="layui-elem-quote slideBtn"><{$vo.name}><i class="icon-up"></i></blockquote>
		<div class="picture" id="g-<{$i}>">
			<foreach name="vo.photo" item="voo">
				<div class="thumblist">
					<img src="/<{:C('DATA_THUMB_IMAGES').$key}>" layer-src="/<{:C('DATA_IMAGES').$key}>" alt="<{$voo}>">
					<span><{$voo}></span>
				</div>
			</foreach>
		</div>
	</volist>		
<else/>
	<blockquote class="layui-elem-quote layui-quote-nm">Waiting for uploading pictures...</blockquote>
</notempty>